<script lang="ts" setup>
/**
 * Props
 * @name 生成的iconfont.css文件中 图标对应的class名字
 *
 * @size 图标大小
 * 默认 60rpx
 *
 * @width 图标宽度
 * 优先于 size
 *
 * @height 图标高度
 * 优先于 size
 *
 * @styles 自定义样式
 *
 * iconfont生成步骤
 * 1：电脑全局安装工具 iconfont-tools ·npm install -g iconfont-tools·
 * 2：打开iconfont图标库项目，选择Symbol模式，下载到本地
 * 3：打开下载的文件最底层 存在iconfont.js/json/css/ttf/... 的目录
 * 4：在该目录打开cmd，执行脚本iconfont-tools
 * 5：按步骤Enter后打开生成的文件夹
 * 6：选择需要的文件（当前项目使用 *.css）存入项目中，App.vue引用
 */
import { hasUnit } from '@U/common'
import type { IFunc, PropType } from '@/interface'

defineProps({
  name: {
    type: String,
    required: true,
  },
  size: {
    type: String,
    required: false,
    default: '60',
  },
  width: {
    type: String,
    required: false,
    default: '',
  },
  height: {
    type: String,
    required: false,
    default: '',
  },
  styles: {
    type: Object,
    required: false,
    default: () => ({}),
  },
  click: {
    type: Object as PropType<IFunc>,
    required: false,
    default: () => {},
  },
  clickParams: {
    type: Object,
    required: false,
    default: () => ({}),
  },
})
</script>

<template>
  <div
    :class="['t-icon', name, 'autoBG']"
    :style="{width: hasUnit(width || size), height: hasUnit(height || size), ...styles}"
    @tap="click(clickParams)"
  />
</template>